<template>
  <!-- 商品详情界面 -->
  <div>
    <!-- 头部退出按钮 -->
    <van-nav-bar left-arrow @click-left="onClickLeft"> </van-nav-bar>
    <!-- 头部轮播 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="(item, index) in data_base.imgs" :key="index">
        <img :src="item.url">
      </van-swipe-item>
    </van-swipe>
    <!-- 商品数据 -->
    <div class="hezi">
      <h1>￥{{data_base.price}}</h1>
      <span class="sp1">{{data_base.name}}</span><br />
      <span class="sp2">{{data_base.text}}</span><br />
      <van-grid :column-num="data_base.list.length ? data_base.list.length : 4">
        <van-grid-item v-for="(item,index) in data_base.list" :key='index'>
          <van-icon :name="item.ico" />{{item.text1}}
          <span class="tu">{{item.text2}}</span>
        </van-grid-item>
      </van-grid>

      <div class="jia">该商品100%正品，假一赔十</div>
      <span class="sp3">正品发票 · 顺风包邮 · 退货包运费 · 当日发货</span><br />
      <div>
        <van-icon class="baoxian" name="youzan-shield" text="">
          <span class="tu">正品险由中国人保财险承保</span>
        </van-icon>
      </div>
    </div>
    <!-- 底部标识 -->
    <van-goods-action>
      <van-goods-action-icon icon="home-o" text="主页" @click="onClickLeft" to='/' />
      <van-goods-action-icon icon="cart-o" text="购物车" to="/cart" />
      <van-goods-action-icon icon="friends-o" text="我的" to="/my" />
      <van-goods-action-button type="warning" text="加入购物车" @click="add_cart" />
      <van-goods-action-button type="danger" text="立即购买" @click="buy" />
    </van-goods-action>
  </div>
</template>
<script>
export default {
  data() {
    return {
      show: false,
    };
  },
  props: ["data_base"],
  methods: {
    //加入购物车
    add_cart() {
      let sta = localStorage.getItem("sta");
      sta = JSON.parse(sta);
      if (sta.sx == 1) {
        let data_cart = {
          user_id: sta.id,
          goods_id: this.data_base.id,
          select_num: 1,
        };
        let myurl = this.$url + "cart_add";
        this.axios.post(myurl, { data_cart: data_cart }).then(
          (res) => {
            this.$toast.success("加入购物车成功");
            console.log(res);
          },
          (err) => {
            console.log("数据读取失败");
            console.log(err);
          }
        );
      } else {
        this.$toast("请先登录");
        this.$router.push("/login");
      }
    },
    //点击购买触发的事件
    buy() {
      let sta = localStorage.getItem("sta");
      sta = JSON.parse(sta);
      let address = localStorage.getItem("address");
      address = JSON.parse(address);
      if (sta.sx == 1 && address.sx == 1) {
        let data_order = {
          user_id: sta.id,
          goods_id: this.data_base.id,
          address_id: address.id,
          select_num: 1,
          is_payment: false,
          is_deliver: false,
          is_get: false,
          estimate: "",
          is_refund: false,
          is_to_refund: false,
        };
        let myurl = this.$url + "order_add";
        this.axios.post(myurl, { data_order }).then(
          (res) => {
            let order = {
              sx: 1,
              id: [JSON.parse(res.data.data).insertId],
            };
            order = JSON.stringify(order);
            localStorage.setItem("order", order);
            this.$router.push("/buy");
          },
          (err) => {
            console.log("数据读取失败");
            console.log(err);
          }
        );
      } else if (sta.sx == undefined) {
        this.$toast("请先登录");
        this.$router.push("/login");
      } else if (sta.sx == 1) {
        this.$toast("请先填写收货地址");
        this.$router.push("/address");
      }
    },
    onClickLeft() {
      this.$emit("exit");
    },
  },
};
//YErun123321
</script>
<style scoped>
.app1 {
  width: 300px;
  height: 500px;
  border: 1px solid black;
  margin: 0 auto;
}
.van-goods-action {
  z-index: 2;
}
img {
  width: 100%;
}

h1 {
  color: red;
  margin: 10px 0;
}

.sp1 {
  color: orange;
  font-size: 20px;
}
.sp2 {
  font-weight: bold;
  font-size: 15px;
}
.jia {
  margin: 0 px;
  font-size: 15px;
  background-color: rgb(225, 225, 225);
  border: 2px solid rgb(225, 225, 225);
  border-radius: 6px;
  padding: 5px;
}
.tu {
  font-size: 11px;
}
.van-grid-item {
  font-size: 15px;
}
.sp3 {
  font-size: 13px;
}

.hezi {
  padding-left: 10px;
  padding-right: 10px;
  overflow: scroll;
}
.van-nav-bar__content {
  position: fixed;
  left: 0;
  top: 0ew;
}
.van-nav-bar {
  position: fixed;
}
</style>

